<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>chat</title>
    <script th:src="@{sockjs.min.js}"></script>
    <script th:src="@{stomp.min.js}"></script>
    <script th:src="@{jquery-3.1.1.min.js}"></script>
</head>
<body>
<p>chat</p>
<form id="chatForm">
    <textarea rows="4" cols="60" name="text"></textarea>
    <input type="submit"/>
    <button id="stop">关闭</button>
</form>
<script th:inline="javascript">
    $("#chatForm").submit(function(e){
        e.preventDefault();
        var text = $("#chatForm").find('textarea[name="text"]').val();
        sendSpittle(text);
    });

    var sock = new SockJS("/endpointChat");
    var stomp = Stomp.over(sock);
    stomp.connect('guest', 'guest', function(frame){
        //这里/user为服务端消息代理中配置的点对点订阅前缀
        stomp.subscribe("/user/point/notifications", handleNotification);
    });

    function handleNotification(message){
        $("#output").empty().append("<b>Received：" + message.body + "</b><br/>")
    }

    function sendSpittle(text){
        stomp.send("/chat", {}, text);
    }

    $("#stop").click(function(){sock.close()});
</script>
<div id="output" style="width: 200px;height: 100px;display: block;"></div>
</body>
</html>